<template>
  <div id="technician-home">
    <c-title text="技能师傅主页"></c-title>
    <van-swipe class="bg-img" :show-indicators="false">
      <van-swipe-item>
        <img class="bg-img" :src="dataDetail.annex_file ? dataDetail.annex_file.shifu_image_url : ''" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <video :src="dataDetail.annex_file ? dataDetail.annex_file.shifu_video_url : ''" class="bg-img" controls webkit-playsinline="true" playsinline="true" x5-video-ignore-metadata="true"></video>
      </van-swipe-item>
    </van-swipe>
    
    <div class="des-pane">
      <div class="top-pane">
        <div class="left">
          <span class="true-name">{{ dataDetail.realname }}</span>
          <img
            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_male.png"
            alt=""
            class="img-icon sex-img"
            v-if="dataDetail.detail_info && dataDetail.detail_info.sex == '男'"
          />
          <img
            src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_female.png"
            alt=""
            class="img-icon sex-img"
            v-if="dataDetail.detail_info && dataDetail.detail_info.sex == '女'"
          />
          <span class="training-name">{{ dataDetail.other1 == '1' ? "已培训" : "未培训" }}</span>
        </div>
        <div class="right">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_star.png" alt="" class="img-icon" v-for="item in dataDetail.star_grade" :key="item" />
          <span class="score-sty">{{ dataDetail.star_grade }}分</span>
        </div>
      </div>
      <div class="address-pane">
        <span class="address-name">{{ dataDetail.province_name }}-{{ dataDetail.city_name }}-{{ dataDetail.district_name }}-{{ dataDetail.street_name }}</span>
        <div class="location-sty">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_local (1).png" alt="" class="img-icon" />{{ dataDetail.distance }}{{ dataDetail.unit }}
        </div>
      </div>
      <div class="condition-info">
        <div class="left-des">
          <span class="line-sp">年龄</span>
          <span class="line-val" v-if="dataDetail.detail_info && dataDetail.detail_info.age">{{ dataDetail.detail_info ? dataDetail.detail_info.age : "" }}岁</span>
        </div>
        <div class="left-des">
          <span class="line-sp">籍贯</span>
          <span class="line-val">{{ dataDetail.detail_info ? dataDetail.detail_info.native_place : "" }}</span>
        </div>
        <div class="left-des">
          <span class="line-sp">民族</span>
          <span class="line-val">{{ dataDetail.detail_info ? dataDetail.detail_info.nation : "" }}</span>
        </div>
      </div>
      <div class="condition-info">
        <div class="left-des">
          <span class="line-sp">学历</span>
          <span class="line-val">{{ dataDetail.detail_info ? dataDetail.detail_info.education : "" }}</span>
        </div>
        <div class="left-des">
          <span class="line-sp">身高</span>
          <span class="line-val" v-if="dataDetail.detail_info && dataDetail.detail_info.stature">{{ dataDetail.detail_info ? dataDetail.detail_info.stature : "" }}cm</span>
        </div>
        <div class="left-des">
          <span class="line-sp">体重</span>
          <span class="line-val" v-if="dataDetail.detail_info && dataDetail.detail_info.weight">{{ dataDetail.detail_info ? dataDetail.detail_info.weight : "" }}kg</span>
        </div>
      </div>
    </div>
    <div class="certificate-pane" @click="popup_show = true">
      <div class="left-certificate">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/anytime_service/icon_id-card (4).png" alt="" class="img-icon" />
        <span class="certificate-name">证件</span>
      </div>
      <van-icon name="arrow" />
    </div>
    <div class="skill-service">
      <div class="service-name">技能服务</div>
      <!-- <div class="service-pane">
        <img class="service-img" src="https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJU1SKoHsyXTQvV2mdPlOprjqeyJvTXTHkGJ1jj8S1bBcluV5a5ay6fYXic3SlVE6v652ia592ycxpw/132" alt="" />
        <div class="right-box">
          <div class="top-name">技能名称</div>
          <div class="content">分类名称<span class="content-detail">技能内容技能内容技能内容</span></div>
          <div class="bottom-pane">
            <div class="price-row">
              <span class="price-sty">99.00</span>
              <span class="once-sty">元/次</span>
              <span class="sold">已售1000</span>
            </div>
            <span class="appointment">预约</span>
          </div>
        </div>
      </div> -->
      <div class="service-pane" @click="goSkillService(item.id)" v-for="(item, index) in dataDetail.has_many_ability" :key="index">
        <img class="service-img" :src="item.pic_url" alt="" />
        <div class="right-box">
          <div class="top-name">{{ item.title }}</div>
          <div class="content">
            {{ item.has_one_category ? item.has_one_category.title : "" }}<span class="content-detail">{{ item.desc }}</span>
          </div>
          <div class="bottom-pane">
            <div class="price-row">
              <span class="price-sty">{{ item.fee }}</span>
              <span class="once-sty">元/次</span>
              <span class="sold">已售{{ item.service_order_num }}</span>
            </div>
            <span class="appointment">预约</span>
          </div>
        </div>
      </div>
    </div>

    <van-popup v-model="popup_show" round position="bottom" :style="{ height: '21rem' }">
      <div class="popup-pane">
        <div class="cross-sty">
          <van-icon name="cross" @click="popup_show = false" />
        </div>
        <div class="skill-certificate">技能证书</div>
        <div class="skill-img-pane">
          <img class="skill-img" :src="dataDetail.annex_file ? dataDetail.annex_file.capability_certificate_url : ''" alt="" />
        </div>
        <div class="skill-certificate">健康证书</div>
        <div class="skill-img-pane">
          <img class="skill-img" :src="dataDetail.annex_file ? dataDetail.annex_file.health_certificate_url : ''" alt="" />
        </div>
      </div>
    </van-popup>
    <bottom-bar type="technician" :mobile="`tel:${dataDetail.mobile}`" v-if="info"></bottom-bar>
  </div>
</template>
<script>
import technician_home_controller from "./technician_home_controller";

export default technician_home_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#technician-home {
  padding-bottom: 6rem;

  .bg-img {
    height: 16.55rem;
    margin: 0;
    width: 100%;
    object-fit: contain;
  }

  .des-pane {
    background: white;
    padding: 0.6rem 0.6rem 0.675rem 0.6rem;

    .top-pane {
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .true-name {
        font-size: 0.85rem;
        font-weight: bold;
        color: #333;
      }

      .training-name {
        font-size: 0.75rem;
        font-weight: 400;
        color: #4978f8;
        border-radius: 0.1rem 0.1rem 0.1rem 0.1rem;
        border: 0.025rem solid #4978f8;
        padding: 0.13rem 0.2rem;
        line-height: 1;
      }

      .right {
        display: flex;
        justify-content: center;
        align-items: center;

        .star-sty {
          width: 0.8rem;
          height: 0.8rem;
        }

        .score-sty {
          font-size: 0.9rem;
          font-weight: 500;
          color: #ff9c43;
          margin-left: 0.2rem;
        }
      }
    }

    .address-pane {
      display: flex;
      justify-content: space-between;
      margin: 0.7rem 0 0.8rem 0;

      .address-name {
        font-size: 0.85rem;
        font-weight: 400;
        color: #898989;
      }

      .location-sty {
        font-size: 0.85rem;
        font-weight: 400;
        color: #898989;
        display: flex;
        align-items: center;
      }
    }

    .condition-info {
      display: flex;
      margin-bottom: 0.6rem;

      .left-des {
        display: flex;
        flex-direction: column;
        flex: 1;
        text-align: left;

        .line-sp {
          font-size: 0.85rem;
          font-weight: 400;
          color: #898989;
          margin-bottom: 0.5rem;
        }

        .line-val {
          font-size: 0.85rem;
          font-weight: 400;
          color: #4978f8;
        }
      }
    }
  }

  .certificate-pane {
    background: white;
    padding: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.4rem;

    .left-certificate {
      font-size: 0.85rem;
      font-weight: 400;
      color: #333;
      display: flex;
      align-items: center;

      .certificate-name {
        margin-left: 0.2rem;
        font-weight: 600;
      }
    }
  }

  .skill-service {
    background: white;
    padding: 0.6rem;
    margin-top: 0.6rem;

    .service-name {
      font-size: 0.85rem;
      font-weight: 600;
      color: #333;
      margin-bottom: 0.6rem;
      text-align: left;
    }

    .service-pane {
      display: flex;
      margin-bottom: 0.6rem;

      .service-img {
        width: 5.45rem;
        height: 5.45rem;
        border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
        margin: 0;
      }

      .right-box {
        margin-left: 0.3rem;
        width: calc(100% - 5.45rem);
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top-name {
          font-size: 0.85rem;
          font-weight: 600;
          color: #333;
          text-align: left;
        }

        .content {
          font-size: 0.85rem;
          font-weight: 400;
          color: #898989;
          text-align: left;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          word-break: break-all;
          overflow: hidden;

          .content-detail {
            margin-left: 0.6rem;
          }
        }

        .bottom-pane {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;

          .price-row {
            .price-sty {
              font-size: 0.9rem;
              font-weight: 500;
              color: #f77a0a;
            }

            .once-sty {
              font-size: 0.75rem;
              font-weight: 400;
              color: #ff9c43;
            }

            .sold {
              font-size: 0.75rem;
              font-weight: 400;
              color: #898989;
              margin-left: 0.4rem;
            }
          }

          .appointment {
            background: #ff9c43;
            border-radius: 0.875rem 0.875rem 0.875rem 0.875rem;
            color: white;
            padding: 0.3rem 1.2rem;
          }
        }
      }
    }
  }

  .popup-pane {
    margin: 0.6rem;

    .cross-sty {
      text-align: right;
    }

    .skill-certificate {
      font-size: 0.85rem;
      font-weight: bold;
      color: #333;
      text-align: left;
      margin-bottom: 0.65rem;
    }

    .skill-img-pane {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 0.5rem;
      // justify-content: space-between;
      .skill-img {
        margin: 0 0.5rem 0.5rem 0;
        // width: 45%;
        width: 8.475rem;
        height: 8.475rem;
        background: #e8e8e8;
        border-radius: 0.2rem 0.2rem 0.2rem 0.2rem;
      }
    }
  }

  .img-icon {
    width: 0.85rem !important;
    height: 0.85rem !important;
  }

  .sex-img {
    margin: 0 0.8rem 0 0.2rem;
  }
}
</style>
